<template>
    <div class="list">
        <div class="top">
            <div class="sqgzryqd">
                <about>
                    <div slot="about">社区工作人员清单</div>
                </about>
                <div class="tits">
                    <span>社区名称</span>
                    <span>服务人员姓名</span>
                    <span>性别</span>
                    <span>电话</span>
                </div>
                <div class="echarts-sqgzryqd">
                    <vue-seamless-scroll :data="listData" class="seamless-warp">
                        <ul class="item">
                            <li v-for="(item,index) in listData" :key="index">
                                <span class="title" v-text="item.itemname"></span>
                                <span class="date" v-text="item.name"></span>
                                <span class="date" v-text="item.gender"></span>
                                <span class="date" v-text="item.tel"></span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
            <div class="sjgdlb">
                <div class="titss">事件工单列表</div>
                <div class="tits">
                    <span>序号</span>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>电话</span>
                    <span>预警类型</span>
                    <span>预警时间</span>
                    <span>所在社区</span>
                    <span>处理人</span>
                    <span>处理电话</span>
                    <span>处理状态</span>
                </div>
                <div class="echarts-sqgzryqd">
                    <vue-seamless-scroll :data="listData" class="seamless-warp">
                        <ul class="item">
                            <li v-for="(item,index) in listData" :key="index">
                                <span class="title" v-text="item.itemname"></span>
                                <span class="date" v-text="item.name"></span>
                                <span class="date" v-text="item.gender"></span>
                                <span class="date" v-text="item.tel"></span>
                                <span class="title" v-text="item.itemname"></span>
                                <span class="date" v-text="item.name"></span>
                                <span class="date" v-text="item.gender"></span>
                                <span class="date" v-text="item.tel"></span>
                                <span class="date" v-text="item.gender"></span>
                                <span class="date" v-text="item.tel"></span>
                            </li>
                        </ul>
                    </vue-seamless-scroll>
                </div>
            </div>
        </div>
        <div class="middle">
            <div class="qsdysfx">
                <about>
                    <div slot="about">全时段用水分析</div>
                </about>
                <div class="echarts-qsdysfx" id="echarts1">
                    
                </div>
            </div>
            <div class="nldfb">
                <about>
                    <div slot="about">年龄段分布</div>
                </about>
                <div class="echarts-nldfb" id="echarts2">
                    
                </div>
            </div>
            <div class="grysph">
                <about>
                    <div slot="about">个人用水排行TOP10</div>
                </about>
                <div class="echarts-grysph" id="echarts3">
                    
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="yslfx">
                <about>
                    <div slot="about">用水量分析</div>
                </about>
                <div class="echarts-yslfx" id="echarts4">
                    
                </div>
            </div>
            <div class="djlrsl">
                <about>
                    <div slot="about">独居老人数量</div>
                </about>
                <div class="echarts-djlrsl">
                    <div><p>总人数：<span>534532</span></p>占比：<span>100%</span></div>
                    <div><p>男性：<span>243455</span></p>占比：<span>40%</span></div>
                    <div><p>女性：<span>345467</span></p>占比：<span>60%</span></div>
                </div>
            </div>
            <div class="yjfx">
                <about>
                    <div slot="about">预警分析</div>
                </about>
                <div class="echarts-yjfx" id="echarts5">
                    
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import About from '../../About.vue'
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from "echarts"
export default {
    name: 'WaterList',
    data() {
        return {
            listData: [
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'},
                {itemname:0,name:'王富贵',gender:'男',tel:'13866668888'}
            ]
        }
    },
    components: {
        About,
        vueSeamlessScroll
    },
    computed: {
        classOption () {
            return {
                step: 0.2, // 数值越大速度滚动越快
                limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
            }
        }
    },
    methods:{
        echarts1() {
            let myChart = echarts.init(document.getElementById("echarts1"));
            // 绘制图表
            let option = {
                tooltip : {
                    formatter: function(params) {
                        return JSON.stringify(params[0].axisValue) + "：" + params[0].data + '人次';
                    },
                    backgroundColor:'#65D4C5',//通过设置rgba调节背景颜色与透明度
                    borderWidth:0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                grid: {
                    left: 30,
                    right:20,
                    top:30,
                    bottom:30

                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 18
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        boundaryGap : false,
                        data:['0时','2时','4时','6时','8时','10时','12时','14时','16时','18时','20时','22时']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine:true,
                        name: '(人次)',
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#dffdff'
                        },
                        axisTick:{
                            show:true//不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 16
                        },
                        
                        /*data : ['0','20','40','60','80','100']*/
                    }
                ],
                series : [
                    {
                        type:'line',
                        color:'#d5d073',
                        smooth:true,//设置折线图平滑
                        data:[20, 40, 70, 50, 40, 80, 20, 40, 70, 50, 100, 90],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#65D4C5" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#65D4C5',//折点颜色
                                lineStyle:{
                                    color:'#65D4C5' //折线颜色
                                }
                            }
                        }
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts2() {
            let myChart = echarts.init(document.getElementById("echarts2"));
            // 绘制图表
            var option = {
                color: ["#2C62FB", "#EBC058", "#22AC38", "#E4007F"],
                tooltip: {
                    show: true,
                },
                legend: {
                    textStyle: {
                        color: "#dffdff",
                        fontSize:16
                    },
                    itemHeight: 4,
                    itemWidth: 15,
                    itemGap: 10,
                    icon: "rect",
                    bottom: 10,
                    x: "center",
                    data: ["60岁以下", "60-70岁", "70-80岁", "80岁以上"],
                },
                graphic: [
                {
                    //环形图中间添加文字
                    type: "text", //通过不同top值可以设置上下显示
                    left: "center",
                    top: "48%",
                    style: {
                        text: "占比",
                        textAlign: "center",
                        fill: "rgba(200,232,250,0.8)", //文字的颜色
                        fontSize: 20,
                    },
                },
                ],
                series: [{
                    name: "老人年龄段分布",
                    type: "pie",
                    radius: ["40%", "60%"],
                    label: {
                    fontStyle: "normal",
                    alignTo: "edge",
                    formatter: "{text|{b}}\n{value|{d}%}\n",
                    minMargin: 5,
                    edgeDistance: 10,
                    padding: [0, 0, 50, 0],
                    rich: {
                        text: {
                            fontSize: 16,
                            lineHeight: 20,
                            color: "#DFFDFF",
                            },
                            value: {
                            fontSize: 18,
                            lineHeight: 15,
                            color: "#DFFDFF"
                            },
                        },
                    },
                    labelLine: {
                        length: 15,
                        length2: 5,
                        maxSurfaceAngle: 80,
                    },
                    labelLayout: function (params) {
                        var isLeft = params.labelRect.x < myChart.getWidth() / 2;
                        var points = params.labelLinePoints;
                        // Update the end point.
                        points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                        return {
                            labelLinePoints: points,
                        };
                    },
                    data: [
                        { value: 1048, name: "60岁以下" },
                        { value: 735, name: "60-70岁" },
                        { value: 580, name: "70-80岁" },
                        { value: 580, name: "80岁以上" },
                    ]
                }],
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts3() {
            let myChart = echarts.init(document.getElementById("echarts3"));
            // 绘制图表
            var option = {
                tooltip : {
                    formatter: function(params) {
                        return params.name + "：" + params.value + 'L';
                    },
                    backgroundColor:'#65D4C5',//通过设置rgba调节背景颜色与透明度
                    borderWidth:0,
                    textStyle: {
                        color: '#fff',
                        fontSize: 18
                    }
                },
                xAxis: {
                    axisLine: {show: false },
                    axisTick: {show: false},
                    axisLabel: {
                        lineStyle:{
                            color:'#1A52A6',
                            width:2,//这里是为了突出显示加上的
                        },
                        color: "#dffdff",  //刻度线标签颜色
                        fontSize: 16
                    },
                    type: 'category',
                    data: ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {show: false},
                    axisTick: {show: false},
                    axisLabel: {show: false}
                },
                series: [{
                    data: [120, 200, 150, 80, 70, 110, 130, 80, 88, 30],
                    type: 'bar',
                    barWidth : 25,
                    itemStyle: {
                        normal: {
                            label : {
                                show: true,
                                position: 'top',//显示位置 
                                textStyle: { //文字样式
                                    color: '#76F9FB',
                                    fontSize:18
                                }
                            },
                            color: function(params){
                                var colorlist = [
                                    ['rgb(228,0,127,0.6)','rgb(228,0,127,0.2)'],
                                    ['rgb(235,192,88,0.6)','rgb(235,192,88,0.2)'],
                                    ['rgb(34,172,56,0.6)','rgb(34,172,56,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)'],
                                    ['rgb(6,211,156,0.6)','rgb(6,211,156,0.2)']
                                ];
                                return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: colorlist[params.dataIndex][0]
                                    }, {
                                    offset: 1,
                                    color: colorlist[params.dataIndex][1]
                                }])
                            },
                        }
                    }
                }]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts4() {
            let myChart = echarts.init(document.getElementById("echarts4"));
            // 绘制图表
            let option = {
                tooltip : {
                    trigger: 'axis'
                },
                grid: {
                    left: 30,
                    right:20,
                    top:30,
                    bottom:30

                },
                legend: {
                    /* y: 'bottom',*/
                    icon: 'party',
                    x:"right",
                        data:['本期','同期'],
                        textStyle:{    //图例文字的样式
                            color:'#dffdff',
                            fontSize:16
                    },
                    itemHeight: 4,
                    itemWidth: 15,
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 18
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        boundaryGap : false,
                        data:['0时','2时','4时','6时','8时','10时','12时','14时','16时','18时','20时','22时']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine:true,
                        name: '(人次)',
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#dffdff'
                        },
                        axisTick:{
                            show:true//不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 16
                        },
                        
                        /*data : ['0','20','40','60','80','100']*/
                    }
                ],
                series : [
                    {
                        name:'本期',
                        type:'line',
                        color:'#d5d073',
                        smooth:true,//设置折线图平滑
                        data:[20, 40, 70, 50, 40, 80, 20, 40, 70, 50, 100, 90],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#EBC058" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#EBC058',//折点颜色
                                lineStyle:{
                                    color:'#EBC058' //折线颜色
                                }
                            }
                        }
                    },
                    {
                        name:'同期',
                        type:'line',
                        color:'#d5d073',
                        smooth:true,//设置折线图平滑
                        data:[40, 70, 50, 100, 90, 20, 40, 70, 50, 40, 80, 20],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#2C62FB" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#2C62FB',//折点颜色
                                lineStyle:{
                                    color:'#2C62FB' //折线颜色
                                }
                            }
                        }
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
        echarts5() {
            let myChart = echarts.init(document.getElementById("echarts5"));
            // 绘制图表
            let option = {
                tooltip : {
                    trigger: 'axis'
                },
                grid: {
                    left: 30,
                    right:20,
                    top:30,
                    bottom:30

                },
                legend: {
                    /* y: 'bottom',*/
                    icon: 'party',
                    x:"right",
                    data:['正常','预警','已处理'],
                    textStyle:{    //图例文字的样式
                        color:'#dffdff',
                        fontSize:16
                    },
                    itemHeight: 4,
                    itemWidth: 15,
                },
                calculable : true,
                xAxis : [
                    {
                        type : 'category',
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 18
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        boundaryGap : false,
                        data:['0时','2时','4时','6时','8时','10时','12时','14时','16时','18时','20时','22时']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine:true,
                        name: '(人次)',
                        nameTextStyle:{
                            fontSize: 16,
                            color: '#dffdff'
                        },
                        axisTick:{
                            show:true//不显示坐标轴刻度线
                        },
                        axisLine: {
                            show: true,//不显示坐标轴线
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                        },
                        axisLabel: {
                            lineStyle:{
                                color:'#1A52A6',
                                width:2,//这里是为了突出显示加上的
                            },
                            color: "#dffdff",  //刻度线标签颜色
                            fontSize: 16
                        },
                        
                        /*data : ['0','20','40','60','80','100']*/
                    }
                ],
                series : [
                    {
                        name:'正常',
                        type:'line',
                        color:'#1684FB',
                        smooth:true,//设置折线图平滑
                        data:[20, 40, 70, 50, 40, 80, 20, 40, 70, 50, 100, 90],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#1684FB" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#1684FB',//折点颜色
                                lineStyle:{
                                    color:'#1684FB' //折线颜色
                                }
                            }
                        }
                    },
                    {
                        name:'预警',
                        type:'line',
                        color:'#E6457F',
                        smooth:true,//设置折线图平滑
                        data:[40, 70, 50, 100, 90, 20, 40, 70, 50, 40, 80, 20],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#E6457F" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#E6457F',//折点颜色
                                lineStyle:{
                                    color:'#E6457F' //折线颜色
                                }
                            }
                        }
                    },
                    {
                        name:'已处理',
                        type:'line',
                        color:'#58AD3B',
                        smooth:true,//设置折线图平滑
                        data:[60, 90, 40, 10, 30, 70, 80, 100, 60, 80, 10, 30],
                        areaStyle: {
                            normal: {
                                 color: {
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: "#58AD3B" // 0% 处的颜色
                                        }, {
                                        offset: 1,
                                        color: "rgba(0,0,0,0)" // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#58AD3B',//折点颜色
                                lineStyle:{
                                    color:'#58AD3B' //折线颜色
                                }
                            }
                        }
                    }
                ]
            };
            //防止越界，重绘canvas
            window.onresize = myChart.resize;
            myChart.setOption(option); //设置option
        },
    },
    mounted() {
        this.echarts1()
        this.echarts2()
        this.echarts3()
        this.echarts4()
        this.echarts5()
    }
}
</script>
<style lang="scss" scoped>
@import "../../../assets/style/index";
    .list{
        width: 2304px;
        height: 1950px;
        float: left;
        .top{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            .sqgzryqd{
                flex: 1;
                display: flex;
                flex-direction: column;
                .tits{
                    display: flex;
                    flex-direction: row;
                    font-size: $font-s;
                    color: $color;
                    text-align: center;
                    height: 78px;
                    line-height: 78px;
                    background-image: url('../../../assets/images/bg-c.png'),url('../../../assets/images/bg-s.png'),url('../../../assets/images/bg-c.png');
                    background-size:100%;
                    background-repeat: no-repeat;
                    background-position: 0 0,0 3px,0 75px;
                    span:nth-child(1) {
                        flex: 3;
                    }
                    span:nth-child(2) {
                        flex: 3;
                    }
                    span:nth-child(3) {
                        flex: 1;
                    }
                    span:nth-child(4) {
                        flex: 3;
                    }
                }
                .echarts-sqgzryqd{
                    flex: 1;
                    overflow: hidden;
                    .seamless-warp ul li{
                        display: flex;
                        flex-direction: row;
                        font-size: $font-s;
                        color: $color-white2;
                        text-align: center;
                        height: 78px;
                        line-height: 78px;
                        background-image: url('../../../assets/images/bg-q.png'),url('../../../assets/images/bg-c.png');
                        background-size:100%;
                        background-repeat: no-repeat;
                        background-position: 0 0,0 75px;
                        span:nth-child(1) {
                            flex: 3;
                        }
                        span:nth-child(2) {
                            flex: 3;
                        }
                        span:nth-child(3) {
                            flex: 1;
                        }
                        span:nth-child(4) {
                            flex: 3;
                        }
                    }
                }
            }
            .sjgdlb{
                flex: 2;
                display: flex;
                flex-direction: column;
                .titss{
                    width: calc(100% - 108px);
                    height: 82px;
                    line-height: 82px;
                    background: url(../../../assets/images/list_shuang.png) no-repeat;
                    background-size: 100% 100%;
                    padding-left: 108px;
                    color: $color-white;
                    font-size: 38px;
                    margin-bottom: 30px;
                    text-align: left;
                }
                .tits{
                    display: flex;
                    flex-direction: row;
                    font-size: $font-s;
                    color: $color;
                    text-align: center;
                    height: 78px;
                    line-height: 78px;
                    background-image: url('../../../assets/images/bg-d.png'),url('../../../assets/images/bg-sc.png'),url('../../../assets/images/bg-d.png');
                    background-size:100%;
                    background-repeat: no-repeat;
                    background-position: 0 0,0 3px,0 75px;
                    span:nth-child(1) {
                        flex: 0.7;
                    }
                    span:nth-child(2) {
                        flex: 0.8;
                    }
                    span:nth-child(3) {
                        flex: 0.6;
                    }
                    span:nth-child(4) {
                        flex: 1.2;
                    }
                    span:nth-child(5) {
                        flex: 1;
                    }
                    span:nth-child(6) {
                        flex: 1.2;
                    }
                    span:nth-child(7) {
                        flex: 1.4;
                    }
                    span:nth-child(8) {
                        flex: 0.7;
                    }
                    span:nth-child(9) {
                        flex: 1.5;
                    }
                    span:nth-child(10) {
                        flex: 0.9;
                    }
                }
                .echarts-sqgzryqd{
                    flex: 1;
                    overflow: hidden;
                    .seamless-warp ul li{
                        display: flex;
                        flex-direction: row;
                        font-size: $font-s;
                        color: $color-white2;
                        text-align: center;
                        height: 78px;
                        line-height: 78px;
                        background-image: url('../../../assets/images/bg-q.png'),url('../../../assets/images/bg-c.png');
                        background-size:100%;
                        background-repeat: no-repeat;
                        background-position: 0 0,0 75px;
                        span:nth-child(1) {
                            flex: 0.7;
                        }
                        span:nth-child(2) {
                            flex: 0.8;
                        }
                        span:nth-child(3) {
                            flex: 0.6;
                        }
                        span:nth-child(4) {
                            flex: 1.2;
                        }
                        span:nth-child(5) {
                            flex: 1;
                        }
                        span:nth-child(6) {
                            flex: 1.2;
                        }
                        span:nth-child(7) {
                            flex: 1.4;
                        }
                        span:nth-child(8) {
                            flex: 0.7;
                        }
                        span:nth-child(9) {
                            flex: 1.5;
                        }
                        span:nth-child(10) {
                            flex: 0.9;
                        }
                    }
                }
            }
        }
        .middle{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            margin-top: 50px;
            .qsdysfx{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-qsdysfx{
                    flex: 1;
                }
            }
            .nldfb{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-nldfb{
                    flex: 1;
                }
            }
            .grysph{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-grysph{
                    flex: 1;
                }
            }
        }
        .bottom{
            width: 2304px;
            height: 620px;
            display: flex;
            flex-direction: row;
            margin-top: 50px;
            .yslfx{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-yslfx{
                    flex: 1;
                }
            }
            .djlrsl{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-djlrsl{
                    flex: 1;
                    padding: 80px 0 0 40px;
                    div:nth-child(1){
                        width: calc(100%-130px);
                        height: 90px;
                        background: url(../../../assets/images/old.png) no-repeat;
                        background-size: 100% 100%;
                        margin-bottom: 50px;
                        line-height: 90px;
                        color: white;
                        font-size: 32px;
                        text-align: left;
                        padding-left: 130px;
                        p{
                            width: 50%;
                            display: inline-block;
                        }
                        span{
                            font-size: 40px;
                            color: $color-white3;
                        }
                    }
                    div:nth-child(2){
                        width: calc(100%-130px);
                        height: 90px;
                        background: url(../../../assets/images/man.png) no-repeat;
                        background-size: 100% 100%;
                        margin-bottom: 50px;
                        line-height: 90px;
                        color: white;
                        font-size: 32px;
                        text-align: left;
                        padding-left: 130px;
                        p{
                            width: 50%;
                            display: inline-block;
                        }
                        span{
                            font-size: 40px;
                            color: $color-white4;
                        }
                    }
                    div:nth-child(3){
                        width: calc(100%-130px);
                        height: 90px;
                        background: url(../../../assets/images/woman.png) no-repeat;
                        background-size: 100% 100%;
                        line-height: 90px;
                        color: white;
                        font-size: 32px;
                        text-align: left;
                        padding-left: 130px;
                        p{
                            width: 50%;
                            display: inline-block;
                        }
                        span{
                            font-size: 40px;
                            color: $color-white5;
                        }
                    }
                }
            }
            .yjfx{
                flex: 1;
                display: flex;
                flex-direction: column;
                .echarts-yjfx{
                    flex: 1;
                }
            }
        }
    }
</style>